import React, { useEffect, memo, useState } from 'react'
import { CateItem, Container,SearchContainer,Box} from './style'
import { connect } from 'react-redux'
import * as actionTypes from './store/actionCreators'
import SearchInput from '@/components/SearchInput/SearchInput'
import imgSearch from '@/assets/images/搜索.png'

const Classify = (props) => {
  const { classifyData } = props
  const { getClassifyDataDispatch } = props
  const { cateMenu = [], cateList = [] } = classifyData
  const [num, setNum] = useState(0);
  const [arr, setArr] = useState([]);

  useEffect(async () => {
    if (!arr.length) {
      await getClassifyDataDispatch();
      setArr(cateList.filter((item) => item.index == 0))
    }
  }, [cateList])

  const click_btn = (index) => {
    setNum(index)
    setArr(cateList.filter((item) => item.index == index))
  }

  return (
    <>
      <Box>
      <SearchContainer onClick={() => {}}>
            <div className="search_logo">
                <img src={imgSearch} alt="" />
            </div>
            <div className="search_input">温暖羊羔绒</div>
        </SearchContainer>
      <Container>
        <div className="CateList">
          {
            cateMenu.map(item => 
            <CateItem key={item.index} onClick={click_btn.bind(null, item.index)}>
              <div style={num === item.index ? { color: '#ec564b', "borderColor": "red" } : {}}>{item.text}</div>
            </CateItem>)
          }
        </div>
        <div className="shopContainer">
          <div className="banner">
            {
              arr && arr.length ? (<img src={arr[0].banner.img} />
              ) : " "
            }
            {
              arr.length ? arr[0].list.map((item, index) => (

                <div className="shopBox" key={index}>
                  <div className="shopTile">{item.title}</div>
                  <div className="shopItemBox">
                    {
                      item.subList.map((item, index) =>
                      (
                        <div className="shopItem" key={index}>
                          <div className="shopImg">
                            <img src={item.img} alt="" />
                          </div>
                          <div className="shopDesc">{item.text}</div>
                        </div>
                      )
                      )
                    }
                  </div>
                </div>
              )
              ) : ""
            }
          </div>
        </div>
      </Container>
      </Box>
        
    </>
  )
}

const mapStateToProps = (state) => {
  return {
    classifyData: state.classify.classifyData
  }
}
const mapStateToDispatch = (dispatch) => {
  return {
    getClassifyDataDispatch() {
      dispatch(actionTypes.getClassifyData())
    }
  }
}


export default connect(mapStateToProps, mapStateToDispatch)(memo(Classify))